﻿@model DataModel.Models.UserModel

<fieldset>
    <legend>UserModel</legend>

    <div class="display-label">LastName:</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.LastName)
    </div>

    <div class="display-label">FirstName:</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.FirstName)
    </div>

    <div class="display-label">FamilyName:</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.FamilyName)
    </div>

    <div class="display-label">Email:</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Email)
    </div>

    <div class="display-label">Roles:</div>
    <div class="display-field">
        <ol id="roleList">
        @foreach (var role in Model.Roles)
        {
            <li id="@role.ID.ToString()"> @role.Name - <a onclick="DeleteRole('@role.ID.ToString()')">Delete Role</a></li>
        }
        </ol>
        <fieldset>
            <legend>Add Role</legend>
            @Html.DropDownList("roles", ((IEnumerable<SelectListItem>)ViewBag.Roles))
                <a id="AddRole">Add Role</a>
        </fieldset>
    </div>
</fieldset>

<script>
    $(document).ready(function () {
        var roleList = $("#roleList li");
        var roleSelectElem = $("#roles option");
        for (var i = 0; i < roleList.size() ; i++) {
            for (var j = 0; j < roleSelectElem.size() ; j++) {
                if (roleList[i].id == roleSelectElem[j].value) {
                    roleSelectElem[j].style.display = "none";
                }
                else roleSelectElem[j].selected = "selected";
            }
        }
    });

    (function () {
        $("#AddRole").click(function () {
            var rolesSelect = $("#roles")[0];
            var rolesList = $("#roles option");
            var roleValue = rolesSelect[rolesSelect.selectedIndex].value;
            var userValue = $("#Users")[0].value;
            var data = { Role: roleValue, UID: userValue };
            $.post("/Role/AddRole", data);
            rolesSelect[rolesSelect.selectedIndex].style.display = "none";
            $("#roleList").append("<li id=\'" + roleValue + "\'>" + rolesSelect[rolesSelect.selectedIndex].innerHTML + 
                " - <a onclick=\"DeleteRole(\'" + roleValue + "\')\">Delete Role</a></li>");
            for (var i = 0; i < rolesList.size() ; i++) {
                if (rolesList[i].style.display != "none") {
                    rolesList[i].selected = "selected";
                    break;
                }
            }
        })
    })();

    function DeleteRole(roleId) {
            var data = { Role: roleId, UID: $("#Users")[0].value };
            $.post("/Role/DeleteRole", data);
            $("#" + roleId).hide();
            var rolesSelect = $("#roles option");
            for (var i = 0; i < rolesSelect.size() ; i++) {
                if (rolesSelect[i].value == roleId) {
                    rolesSelect[i].style.display = "";
                }
            }
            
    };

    function ChangeData() {
    }

</script>